<template>
    <div class="video-container">
        <div>
            <h1>Local Video Player</h1>
            <input type="file" @change="handleFileChange" accept="video/*" />
            <div v-if="currentFolder">
                <button @click="goBack">Go Back</button>
                <h2>Current Folder: {{ currentFolder.name }}</h2>
            </div>
            <div v-if="videos.length > 0">
                <h2>Videos</h2>
                <ul>
                    <li
                        v-for="video in videos"
                        :key="video.name"
                        @click="playVideo(video)"
                    >
                        {{ video.name }}
                    </li>
                </ul>
            </div>
            <div v-if="folders.length > 0">
                <h2>Folders</h2>
                <ul>
                    <li
                        v-for="folder in folders"
                        :key="folder.name"
                        @click="enterFolder(folder)"
                    >
                        {{ folder.name }}
                    </li>
                </ul>
            </div>
            <video v-if="selectedVideo" controls width="600">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>
</template>

<script>
export default {
    name: "local-video",
    data() {
        return {
            currentFolder: null,
            folders: [],
            videos: [],
            selectedVideo: null,
        };
    },
    methods: {
        handleFileChange(event) {
            const fileInput = event.target;
            const files = fileInput.files;
            this.loadFiles(files);
        },
        loadFiles(files) {
            const folders = [];
            const videos = [];

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const isFolder = file.type === "";
                const item = {
                    name: file.name,
                    isFolder: isFolder,
                };

                if (isFolder) {
                    folders.push(item);
                } else {
                    videos.push(item);
                }
            }

            this.folders = folders;
            this.videos = videos;
        },
        enterFolder(folder) {
            this.currentFolder = folder;
            const folderPath = this.currentFolder.name + "/";
            const filesInFolder = this.folders
                .filter(
                    (file) =>
                        file.name.startsWith(folderPath) &&
                        file.name !== folderPath,
                )
                .map((file) => {
                    const relativePath = file.name.substring(folderPath.length);
                    return {
                        ...file,
                        name: relativePath,
                    };
                });

            this.loadFiles(filesInFolder);
        },
        goBack() {
            const parts = this.currentFolder.name.split("/");
            parts.pop();
            const parentFolder = parts.join("/");
            this.enterFolder({ name: parentFolder, isFolder: true });
        },
        playVideo(video) {
            this.selectedVideo = video;
            this.currentFolder = null; // 播放视频时清除当前文件夹
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/local-video.scss";
</style>
